<template>
    <div class="person">
        <h2>Name: {{ person.name }}</h2>
        <h2>Age: {{ person.age }}</h2>
        <h2>Cars: {{ person.cars.car1 }}、{{ person.cars.car2 }}</h2>
        <button @click="changeName">change Name</button>
        <button @click="changeAge">change Age</button>
        <button @click="changeCar1">change Car1</button>
        <button @click="changeCar2">change Car2</button>
        <button @click="changeCar">change Car</button>
    </div>
</template>

<script setup name="Person">
    import { reactive, watch } from 'vue';

    // data
    let person = reactive({
        name: 'Aphasia',
        age: 23,
        cars: {
            car1: "Bmw x5",
            car2: "Benz G63"
        }
    })

    function changeName() {
        person.name += '~'
    }
    function changeAge() {
        person.age += 1
    }
    function changeCar1() {
        person.cars.car1 = 'Audo'
    }
    function changeCar2() {
        person.cars.car2 = 'GTR'
    }
    function changeCar() {
        person.cars = {
            car1: 'Yadi',
            car2: 'AiMa'
        }
    }

    // watch(() => person.name, (newValue, oldValue) => {
    //     console.log('person.name changed', newValue, oldValue)
    // })

    // watch(() => person.cars, (newValue, oldValue) => {
    //     console.log('person.cars changed', newValue, oldValue)
    // }, {deep: true})

    // const stopWatch = watch(sum, (newValue, oldValue) => {
    //     console.log('sum changed', newValue, oldValue)
    //     if (newValue > 10) {
    //         stopWatch()
    //     }
    // })

    watch([() => person.name, () => person.cars.car1], (newValue, oldValue) => {
        console.log('person changed', newValue, oldValue)
    }, {deep: true})
</script>

<style>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
    li {
        font-size: 20px;
    }
</style>